<template>
  <view class="w-[750rpx] mt-[30rpx]">
    <!-- 头部信息 -->
    <view class="flex items-center justify-between bg-gray-100 p-[20rpx]">
      <text class="text-[30rpx]">管家信息</text>
      <view class="flex">
        <nut-button type="success" size="small" class="mr-[10rpx]"
          >AI健康方案</nut-button
        >
        <nut-button type="success" size="small">邀请会诊</nut-button>
      </view>
    </view>

    <!-- 用户信息 -->
    <view class="p-[20rpx]">
      <view class="flex items-center mb-[10rpx]">
        <image
          src="@/assets/img/wz.png"
          class="w-[80rpx] h-[80rpx] rounded-full bg-gray-200 mr-[20rpx]"
        />
        <view class="flex flex-col">
          <text class="text-[32rpx] font-bold">龙玉群 女 17776496743</text>
          <text class="text-[28rpx] text-green-500 mt-[4rpx]"
            >查看管家信息</text
          >
        </view>
      </view>

      <!-- 功能按钮区域 -->
      <view class="flex justify-around mt-[20rpx]">
        <view class="flex flex-col items-center" @click="navigateTo('consult')">
          <view
            class="w-[100rpx] h-[100rpx] bg-[#f5ba95] rounded-full flex items-center justify-center"
          >
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              name="ren"
              size="36"
              color="#fff"
            />
          </view>
          <text class="mt-[10rpx] text-[28rpx]">咨询管家</text>
        </view>
        <view
          class="flex flex-col items-center"
          @click="navigateTo('communication')"
        >
          <view
            class="w-[100rpx] h-[100rpx] bg-[#f5ba95] rounded-full flex items-center justify-center"
          >
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              name="kehulaidianjilu"
              size="36"
              color="#fff"
            />
          </view>
          <text class="mt-[10rpx] text-[28rpx]">沟通记录</text>
        </view>
        <view
          class="flex flex-col items-center"
          @click="navigateTo('disposal')"
        >
          <view
            class="w-[100rpx] h-[100rpx] bg-[#f5ba95] rounded-full flex items-center justify-center"
          >
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              name="youjian"
              size="36"
              color="#fff"
            />
          </view>
          <text class="mt-[10rpx] text-[28rpx]">订单记录</text>
        </view>
        <view
          class="flex flex-col items-center"
          @click="navigateTo('healthSummary')"
        >
          <view
            class="w-[100rpx] h-[100rpx] bg-[#f5ba95] rounded-full flex items-center justify-center"
          >
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              name="bijibenjilutongxunlu"
              size="36"
              color="#fff"
            />
          </view>
          <text class="mt-[10rpx] text-[28rpx]">健康计划</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'

// 定义导航函数
const navigateTo = page => {
  Taro.navigateTo({
    url: `/pages/health/${page}`,
  })
}
</script>

<style>
/* 如果需要额外的样式可以在这里添加 */
</style>
